<template>
  <div class="story" id="story1">
    <div id="zhongjianbufen1">
      <h1>恰饭吧</h1>
    </div>
    <div id="zhongjianbufen2">人为生而食，非为食而生</div>
    <div id="zhongjianbufen">
      <div id="media-top">
        <h1>
          <span>故事吧
          </span>
        </h1>
        <p>BRAND STORY HAPPY</p>
      </div>
      <div id="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="../assets/images/gushi.jpg" alt="..." />
          </a>
        </div>
        <div class="media-right">
          <p>当天边出现第一缕丝光，</p>
          <p>开始出现稀碎的声音，</p>
          <p>美食味开始出现了，</p>
          <p>穿过厨房，</p>
          <p>满载着扑面而来的诱惑，</p>
          <p>令人流连的味道</p>
          <p>出现在每一所府邸</p>
          <p>随后，欢快的一天</p>
          <p>悠然开始.....</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>

.story{
  height:100%;
  width:100%;
  min-width: 1000px;
  min-height:722px;
  background: url("../assets/images/beijing.png") 100% 100% / cover no-repeat;
    background-color: rgba(165, 180, 120,0.4);
  background-size: 60%;
}
#zhongjianbufen {
width: 1000px;
min-width: 1000px;
height: 570px;
margin: 0 auto;
background-color: rgba(248, 241, 241, 0.5);
}

#zhongjianbufen1 {
  width: 300px;
  height:100px;
  /* border:1px solid #ccc; */
  margin:-20px auto;
  text-align: center;
  color: rgb(39, 24, 24);
  font-size: 26px;
  line-height: 70px;
  /* position: relative;
  top: 40px; */
}
#zhongjianbufen1 h1{
  text-align: center;
  line-height: 100px;
}
#zhongjianbufen2 {
  /* width: 300px; */
  height: 50px;
  padding:20px;
  margin:10px auto;
  text-align: center;
  color: #666;
  font-size: 22px;
  /* position: relative;
  bottom: 30px;  */
}
.media-object {
  height: 300px;
  width: 200px;
  /* margin-top: 40px; */
  border-radius: 47%;
  margin: 0 auto;
  /* border: 1px solid #ccc; */
  border: 5px solid olive;
}

.media-heading {
  margin-left: 80px;
}

.text-muted {
  color: black;
  margin-left: 80px;
  font-size: 16px;
}

#media-top {
  margin: 0 auto;
  width: 250px;
  height: 100px;
  text-align: center;
}

#media-top span {
  color: #999;
}
#media-top h1 {
  color: #555;
  margin-top:40px;
}
#media {
  width:800px;
  margin-top:90px;
  margin: 20px auto;
  /* border:1px solid red; */
}
.media-left {
  width: 300px;
  height: 450px;
  /* border:1px solid blue; */
  float:left;

}
.media-right{
  width: 470px;
  height: 400px;
  /* border:1px solid red; */
  float: right;
  margin-top:40px;
}
.media-left img{
  margin-top:70px;
  margin-left:40px;
}
.media-right p {
  text-align: center;
  font-size: 18px;
  color: #555;
}
</style>